<template>
  <div class="app-container">
<!--    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">-->
<!--      <el-form-item label="表单名称" prop="formName">-->
<!--        <el-input-->
<!--          v-model="queryParams.formName"-->
<!--          placeholder="请输入表单名称"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    <el-row :gutter="10" class="mb8">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['flowable:form:add']"-->
<!--        >新增</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['flowable:form:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['flowable:form:remove']"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['flowable:form:export']"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
<!--    </el-row>-->

<!--    <el-table v-loading="loading" :data="formList" @selection-change="handleSelectionChange">-->
<!--      <el-table-column type="selection" width="55" align="center" />-->
<!--      <el-table-column label="表单主键" align="center" prop="formId" />-->
<!--      <el-table-column label="表单名称" align="center" prop="formName" />-->
<!--      <el-table-column label="备注" align="center" prop="remark" />-->
<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-view"-->
<!--            @click="handleDetail(scope.row)"-->
<!--          >详情</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['flowable:form:edit']"-->
<!--          >修改</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['flowable:form:remove']"-->
<!--          >删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->

<!--    &lt;!&ndash; 添加或修改流程表单对话框 &ndash;&gt;-->
<!--    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="表单名称" prop="formName">-->
<!--          <el-input v-model="form.formName" placeholder="请输入表单名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="表单内容">-->
<!--          <editor v-model="form.formContent" :min-height="192"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="备注" prop="remark">-->
<!--          <el-input v-model="form.remark" placeholder="请输入备注" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->

<!--    &lt;!&ndash;表单配置详情&ndash;&gt;-->
<!--    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="60%" append-to-body>-->
<!--      <div class="test-form">-->
<!--        <parser :key="new Date().getTime()"  :form-conf="formConf" />-->
<!--      </div>-->
<!--    </el-dialog>-->
    <div class="container">
      <FmTable ref="fmTable" url="/process/flowable" id="formId" tableName="sysform" :columns="columns" :toolbar="['add','del']">
        <template #add="scope">
        <el-button
            type="primary"
            plain
            icon="CirclePlusFilled"
            @click="handleAdd"
        >新增
        </el-button>
        </template>
        <template #opt="scope">
                    <el-button
                      size="small"
                      type="primary"
                      icon="view"
                      link
                      @click="handleDetail(scope.row)"
                    >详情</el-button>
                    <el-button
                      size="small"
                      type="primary"
                      icon="edit"
                      link
                      @click="handleUpdate(scope.row)"
                      v-hasPermi="['flowable:form:edit']"
                    >修改</el-button>
        </template>
      </FmTable>
      <el-dialog title="预览表单"  v-model="previewformshow" destroy-on-close :before-close="function (){previewformshow=false}" width="50%">
       <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
      </v-form-render>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {reactive, ref, toRaw} from "vue";

const columns=[
  {
    "label": "表单主键",//标签名称
    "index": "formId",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "表单名称",//标签名称
    "index": "formName",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "备注",//标签名称
    "index": "remark",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },

  {
    "type": "opt",//普通行，字典行，自定义行
    "label": "操作",//标签名称
    "index": "opt",//数据库索引
    "rules": [],//值规则
    "width":150,
    "dataType": "text",//值值类型默认字符类型
  }
]
let formJson = reactive({})
const formData = reactive({})
const optionData = reactive({})
const vFormRef = ref(null)
const router=useRouter()
const previewformshow=ref(false)

const handleUpdate = (row:any) => {
  router.push({ path: '/admin/flowable/flowForm', query: {formId: row.formId }})
}
const handleAdd = () => {
  router.push({ path: '/admin/flowable/flowForm'})
}

const handleDetail = (row) => {
  formJson=reactive(JSON.parse(row.formContent))
  previewformshow.value=true

}

</script>

<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}
</style>
